<template>
	<view class="loginContainer base-maxwidth">
		<u-toast ref="uToast2" @click="showToast"></u-toast>
		<nav-top :title="title"></nav-top>
		<view class="login">
			<image :src="avatarUrl" class="img"></image>
			<view class="btn">
				<button class="my-info avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">点击获取头像</button>
				<u-form 
					labelPosition="left"
					:model="modelUserInfo"
					ref="uForm">
					<u-form-item required label="昵称:" prop="userInfo.nickName" ref="item1">
						<u-input 
							placeholder="请输入昵称" 
							maxlength="20"
							border="bottom"
							v-model="modelUserInfo.userInfo.nickName"
							></u-input>
					</u-form-item>
					<u-form-item required label="密码:" prop="userInfo.password" ref="item2" >
						<u-input 
							placeholder="请输入密码" 
							maxlength="20"
							border="bottom"
							password="true"
							v-model="modelUserInfo.userInfo.password"
							></u-input>
					</u-form-item>
					<u-form-item required label="性别:" prop="userInfo.sex" ref="item3" 	@click="showSexfn">
						<u-input 
							placeholder="选择性别" 
							border="bottom"
							disabledColor="#fff"
							v-model="modelUserInfo.userInfo.sex"
							></u-input>
							<u-icon
								slot="right"
								name="arrow-right"
							></u-icon>
					</u-form-item>
					<u-form-item class="phone-item" required label="手机号码:" prop="userInfo.phone" ref="item4" labelWidth="70px">
						<u-input 
							placeholder="手机号" 
							maxlength="11"
							border="bottom"
							v-model="modelUserInfo.userInfo.phone"
							></u-input>
					</u-form-item>
				</u-form>
				<u-action-sheet
					:show="showSex"
					:actions="actions"
					title="请选择性别"
					description="如果选择保密会报错"
					@close="showSex = false"
					@select="sexSelect"></u-action-sheet>
				<u-datetime-picker
					class="date"
					:show="showDate"
					v-model="value1"
					mode="date"
					@cancel="cancel"
					@confirm="confirm"
					:minDate="-1893484800000"
					:maxDate="nowdate"
				></u-datetime-picker>
				<u-input  placeholder="请选择出生日期" :suffixIcon="dateIcon" @focus="focus" v-model="dateString"></u-input>
			</view>
			<fui-button class="login-btn" width="80vw" @click="registerbClick">立即注册</fui-button>
		</view>
	</view>
</template>

<script>
	import navTop from '@/components/topnav/topNav.vue'
	import fuiInput from "@/components/firstui/fui-input/fui-input.vue"
	import fuiButton from "@/components/firstui/fui-button/fui-button.vue"
	import dayjs from '@/utils/dayjs.js'
	import { rules } from './config/register.config.js'
	import imageToBase64 from '@/utils/imageToBase64.js'
import cellGroup from '../../uni_modules/uview-ui/libs/config/props/cellGroup.js'
	export default {
		components: {
			navTop,
			fuiInput,
			fuiButton,
		},
		data() {
			return {
				showSex: false,
				avatarUrl: '/static/images/common/unlogin.png',
				showDate: false,
				show: false,
				value1: Date.parse('1999/1/1'),
				dateIcon: '/static/images/common/date.png',
				dateString: '',
				title: '注册',
				nowdate: Date.now(),
				actions: [
					{
						name: '男',
					},
					{
						name: '女',
					}
				],
				modelUserInfo: {
					userInfo: {
						nickName: '',
						sex: '',
						phone: '',
						password: '',
					}
				},
				rules: rules
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.uForm.setRules(this.rules)
			console.log('date',Date.parse('1910/1/1 0:0'))
		},
		methods: {
			onChooseAvatar(e) {
				console.log('e',e)
				this.avatarUrl = e.detail.avatarUrl
				console.log('this.avatarUrld', this.avatarUrl)
			},
			onNickName(e) {
				console.log(e)
				this.nickname = e.detail.value
			},
			getphonenumber (e) {
				console.log(e)
			},
			cancel(e) {
				console.log('cancele',e)
				this.showDate = false
			},
			confirm(e) {
				this.dateString = dayjs(e.value).format('YYYY/MM/DD')
				this.showDate = false
			},
			focus() {
				this.showDate = true
			},
			sexSelect(e) {
				this.modelUserInfo.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			showSexfn() {
				this.showSex= true;
				uni.hideKeyboard()
			},
			showToast(params) {
				// console.log('params',...params)
				this.$refs.uToast2.show({
					...params,
					complete() {
						params.url && uni.navigateTo({
							url: params.url
						})
					}
				})
			},
			async registerbClick() {
				const _this = this
				if(this.avatarUrl == '') {
					_this.showToast({
						type: 'default',
						title: '请选择头像',
						message: '请选择头像'
					})
					return
				}
				const image = await imageToBase64(this.avatarUrl)
				const data = {
					username: this.modelUserInfo.userInfo.nickName,
					password: this.modelUserInfo.userInfo.password,
					gender: this.modelUserInfo.userInfo.sex,
					birthday: this.dateString,
					contact: this.modelUserInfo.userInfo.phone,
					avatar: image
				}
				this.$refs.uForm.validate().then(res => {
					_this.$api.post('/users', data).then(res => {
						console.log('cre',res)
							_this.showToast({
								type: 'success',
								title: '注册成功',
								message: '注册成功',
								url: '/subpages/login/loginView',
							})
						}).catch(error => {
							if(error.statusCode == 409) {
								_this.showToast({
									type: 'default',
									title: error.data,
									message: error.data
								})
								return
							}
							console.log('error',error)
						})
				}).catch(errors => {
					_this.showToast({
						type: 'default',
						title: '校验失败',
						message: '校验失败'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .ljs-top .top .topMain .title {
		margin: 0 auto;
		font-weight: 600;
		font-size: 18px!important;
	} 
	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 100vh;
		margin-top: -50px;
	}
	.login .img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}
	
	.date {
		margin-top: 20px;
	}
	
	.avatar-wrapper {
		width: 100px;
		border-radius: 50px;
		background-color: #eee;
		background-size: cover;
		font-size: 12px;
		padding: 5;
		line-height: 21px;
		margin-bottom: 20px;
		margin-top: 20px;
	}
	
	.login-btn {
		margin-top: 30px;
	}
	
</style>